<template>
  <view class="login-buttons">
    <!-- 微信登录 -->
    <button
      v-if="platformInfo.isWeixin || platformInfo.isMpWeixin"
      class="login-btn wechat-btn"
      @click="handleWechatLogin"
      :disabled="isLoading"
    >
      <text class="icon">📱</text>
      <text class="text">微信登录</text>
    </button>

    <!-- 支付宝登录 -->
    <button
      v-if="platformInfo.isAlipay || platformInfo.isMpAlipay"
      class="login-btn alipay-btn"
      @click="handleAlipayLogin"
      :disabled="isLoading"
    >
      <text class="icon">💰</text>
      <text class="text">支付宝登录</text>
    </button>

    <!-- 抖音登录 -->
    <button
      v-if="platformInfo.isDouyin || platformInfo.isMpToutiao"
      class="login-btn douyin-btn"
      @click="handleDouyinLogin"
      :disabled="isLoading"
    >
      <text class="icon">🎵</text>
      <text class="text">抖音登录</text>
    </button>

    <!-- H5平台通用登录按钮 -->
    <template v-if="platformInfo.isH5">
      <button
        class="login-btn wechat-btn"
        @click="handleWechatLogin"
        :disabled="isLoading"
      >
        <text class="icon">📱</text>
        <text class="text">微信登录</text>
      </button>

      <button
        class="login-btn alipay-btn"
        @click="handleAlipayLogin"
        :disabled="isLoading"
      >
        <text class="icon">💰</text>
        <text class="text">支付宝登录</text>
      </button>

      <button
        class="login-btn douyin-btn"
        @click="handleDouyinLogin"
        :disabled="isLoading"
      >
        <text class="icon">🎵</text>
        <text class="text">抖音登录</text>
      </button>
    </template>

    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading-mask">
      <text class="loading-text">登录中...</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '@/store'

interface LoginButtonsEmits {
  (event: 'login', platform: string): void
}

const emit = defineEmits<LoginButtonsEmits>()

// Store
const appStore = useAppStore()

// 响应式数据
const isLoading = ref(false)

// 计算属性
const platformInfo = computed(() => {
  return appStore.platformInfo
})

// 页面加载
onMounted(() => {
  // 初始化第三方登录SDK
  initOAuthSDK()
})

// 初始化第三方登录SDK
const initOAuthSDK = () => {
  // 根据平台初始化对应的SDK
  if (platformInfo.value.isMpWeixin) {
    // 微信小程序SDK已内置
    console.log('微信小程序环境')
  } else if (platformInfo.value.isMpAlipay) {
    // 支付宝小程序SDK已内置
    console.log('支付宝小程序环境')
  } else if (platformInfo.value.isMpToutiao) {
    // 抖音小程序SDK已内置
    console.log('抖音小程序环境')
  } else if (platformInfo.value.isH5) {
    // H5环境可能需要额外加载SDK
    console.log('H5环境')
  }
}

// 微信登录
const handleWechatLogin = async () => {
  try {
    setLoading(true)
    emit('login', 'wechat')
  } catch (error) {
    console.error('微信登录失败:', error)
    uni.showToast({
      title: '微信登录失败',
      icon: 'none'
    })
  } finally {
    setLoading(false)
  }
}

// 支付宝登录
const handleAlipayLogin = async () => {
  try {
    setLoading(true)
    emit('login', 'alipay')
  } catch (error) {
    console.error('支付宝登录失败:', error)
    uni.showToast({
      title: '支付宝登录失败',
      icon: 'none'
    })
  } finally {
    setLoading(false)
  }
}

// 抖音登录
const handleDouyinLogin = async () => {
  try {
    setLoading(true)
    emit('login', 'douyin')
  } catch (error) {
    console.error('抖音登录失败:', error)
    uni.showToast({
      title: '抖音登录失败',
      icon: 'none'
    })
  } finally {
    setLoading(false)
  }
}

// 设置加载状态
const setLoading = (loading: boolean) => {
  isLoading.value = loading
}

// 暴露方法给父组件
defineExpose({
  setLoading
})
</script>

<style lang="scss" scoped>
.login-buttons {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .login-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    .icon {
      font-size: 20px;
      margin-right: 8px;
    }

    .text {
      color: white;
    }

    &:disabled {
      opacity: 0.6;
      transform: none !important;
    }

    &:active:not(:disabled) {
      transform: scale(0.98);
    }
  }

  .wechat-btn {
    background: linear-gradient(135deg, #07c160 0%, #1aad19 100%);
    box-shadow: 0 2px 8px rgba(7, 193, 96, 0.3);

    &:hover:not(:disabled) {
      box-shadow: 0 4px 12px rgba(7, 193, 96, 0.4);
    }
  }

  .alipay-btn {
    background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
    box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3);

    &:hover:not(:disabled) {
      box-shadow: 0 4px 12px rgba(22, 119, 255, 0.4);
    }
  }

  .douyin-btn {
    background: linear-gradient(135deg, #fe2c55 0%, #e91e63 100%);
    box-shadow: 0 2px 8px rgba(254, 44, 85, 0.3);

    &:hover:not(:disabled) {
      box-shadow: 0 4px 12px rgba(254, 44, 85, 0.4);
    }
  }

  .loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;

    .loading-text {
      color: #333;
      font-size: 14px;
    }
  }
}
</style>